<template>
  <a-layout>
    <a-layout-header class="bg-white admin-content-header">
      <div class="col-4 admin-tiao-left">
        <span>{{ $route.name }}</span>
      </div>
      <div class="col-8 text-right">
        <el-button-group>
          <el-button type="primary" @click="visible = true">添加视频</el-button>
        </el-button-group>
      </div>
      <a-drawer
        :title="title"
        placement="right"
        width="500"
        @close="visible = false"
        :visible="visible"
      >
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
          <el-form-item label="名称" prop="title">
            <el-input v-model="ruleForm.title"></el-input>
          </el-form-item>
          <el-form-item label="视频" prop="videoid">
            <el-select v-model="ruleForm.videoid" placeholder="请选择">
              <el-option
                v-for="item in getVideo"
                :key="item.VideoId"
                :label="item.Title"
                :value="item.VideoId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="介绍" prop="info">
            <el-input v-model="ruleForm.info"></el-input>
          </el-form-item>
          <el-form-item label="购买链接" prop="purchase">
            <el-input v-model="ruleForm.purchase"></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="paixu">
            <el-input-number v-model="ruleForm.paixu"></el-input-number>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          </el-form-item>
        </el-form>
      </a-drawer>
    </a-layout-header>
    <a-layout-content class="admin-content-table">
      <el-table height="100%" :data="tableDate" style="width: 100%;">
        <el-table-column prop="ID" label="ID" width="100" sortable></el-table-column>
        <el-table-column prop="videoid" label="videoid"></el-table-column>
        <el-table-column prop="title" label="名称"></el-table-column>
        <el-table-column prop="info" label="介绍"></el-table-column>
        <el-table-column prop="purchase" label="购买链接"></el-table-column>
        <el-table-column prop="purchase" label="二维码" width="250">
          <template slot-scope="scope">
            <img width="250" height="250" :src="scope.row.src" />
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="update(scope)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </a-layout-content>
    <adminContentFooter
      v-bind="{handleSizeChange, handleCurrentChange, currentPage, pagesize,data}"
    ></adminContentFooter>
  </a-layout>
</template>

<script>
import {
  asyncgetpublicvideoanswers,
  asynccreatepublicvideoanswers,
  asyncGetVideoList
} from "../../../plugins/api.js";
import qrcode from "qrcode";
import adminContentFooter from "../../../components/admin/admin-content-footer.vue";
export default {
  name: "Library",
  data() {
    return {
      dialogVisible: false,
      visible: false,
      paths: [],
      name: "图书视频",
      title: "添加视频问题",
      loading: false,
      pagesize: 10,
      currentPage: 1,
      ruleForm: {
        ID: "",
        videoid: "",
        title: "",
        info: "",
        paixu: "",
        purchase: ""
      },
      rules: {
        title: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { min: 3, max: 32, message: "长度在 3 到 32 个字符", trigger: "blur" }
        ],
        videoid: [
          { required: true, message: "请选择视频", trigger: "blur" },
          {
            min: 32,
            max: 32,
            message: "长度在 32 到 32 个字符",
            trigger: "blur"
          }
        ],
        info: [
          { min: 0, max: 32, message: "长度在 0 到 32 个字符", trigger: "blur" }
        ],
        purchase: [
          {
            min: 0,
            max: 512,
            message: "长度在 0 到 512 个字符",
            trigger: "blur"
          }
        ]
      },
      getVideo: [],
      data: []
    };
  },
  computed: {
    tableDate() {
      const { data, search, currentPage, pagesize } = this;
      const tmp = data.filter(
        v => !search || v.name.toLowerCase().includes(search.toLowerCase())
      );
      return tmp.slice((currentPage - 1) * pagesize, currentPage * pagesize);
    }
  },
  watch: {
    visible(v) {
      if (!v) {
        this.ruleForm = {
          ID: "",
          videoid: "",
          title: "",
          info: "",
          paixu: "",
          purchase: ""
        };
        this.title = "添加视频问题";
      }
    }
  },
  async mounted() {
    this.start();
    const { VideoList } = await asyncGetVideoList({
      RegionId: "Title",
      CateId: 1000062341
    });
    if (VideoList && VideoList.Video) {
      this.getVideo = VideoList.Video;
    } else {
      this.getVideo = [];
    }
  },
  methods: {
    async start() {
      this.data = await asyncgetpublicvideoanswers();
      for (let v of this.data) {
        const url = this.code(v.ID);
        const src = await qrcode.toDataURL(url);
        v.src = src;
      }
    },
    handleSizeChange(val) {
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    code(i) {
      return `https://www.hterobot.com/security/library/${i}`;
    },
    async update(v) {
      const { ID, videoid, title, info, paixu, purchase } = v.row;
      this.ruleForm = {
        ID,
        videoid,
        title,
        info,
        paixu,
        purchase
      };
      this.title = "修改视频问题";
      this.visible = true;
    },
    async submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          try {
            await asynccreatepublicvideoanswers(this.ruleForm);
            if (!this.ruleForm.ID) {
              this.$message({
                message: "恭喜你添加成功",
                type: "success"
              });
            } else {
              this.$message({
                message: "恭喜你修改成功",
                type: "success"
              });
            }
            this.visible = false;
            this.start();
          } catch (err) {
            this.$message.error("添加失败");
          }
        }
      });
    }
  },
  components: {
    adminContentFooter
  }
};
</script>

<style scoped>
.row {
  padding-top: 15px;
}
</style>
